"use client";
import React from "react";
import { Space, Table, Tag, Rate, Button, Checkbox } from "antd";
import type { TabsProps } from "antd";
import type { TableProps } from "antd";
import { useEffect, useState } from "react";
import { getdata, deldata, searchdata } from "@/app/API/http";
import type { FormProps } from "antd";
import {
  PlusOutlined,
  InsertRowAboveOutlined,
  QuestionCircleOutlined,
  ColumnHeightOutlined,
  VerticalAlignBottomOutlined,
  ToTopOutlined,
  BarsOutlined,
  EditOutlined,
  InteractionOutlined,
  TeamOutlined,
  PartitionOutlined,
} from "@ant-design/icons";
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}
export default function page() {
  const [list, setList] = useState<any>([
    { id: 1, icon: <VerticalAlignBottomOutlined />, name: "导入" },
    { id: 2, icon: <ToTopOutlined />, name: "导出" },
    { id: 3, icon: <BarsOutlined />, name: "新建任务" },
    { id: 4, icon: <InteractionOutlined />, name: "转移客户" },
    { id: 5, icon: <TeamOutlined />, name: "移入公海" },
    { id: 6, icon: <PartitionOutlined />, name: "合并客户" },
    { id: 7, icon: <EditOutlined />, name: "批量编辑" },
  ]);
  const [data, setData] = useState<any>([]);

  const get = () => {
    getdata().then((res) => {
      setData(res);
    });
  };
  useEffect(() => {
    get();
  }, []);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [title, setTitle] = useState("");
  const [obj, setObj] = useState({});
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const columns: TableProps<DataType>["columns"] = [
    {
      title: "客户名称",
      dataIndex: "name",
    },
    {
      title: "客户状态",
      dataIndex: "Collect",
      render: (Collect, item) => {
        return <Tag>{Collect ? "正在跟进" : "不在跟进"}</Tag>;
      },
    },
    {
      title: "客户星级",
      dataIndex: "value",
      render: (value) => {
        return <Rate defaultValue={value} />;
      },
    },
    {
      title: "首联系人",
      dataIndex: "sname",
    },
    {
      title: "手机号码",
      dataIndex: "send",
    },
    {
      title: "最后跟进",
      dataIndex: "time",
    },
    {
      title: "未跟进天数",
      dataIndex: "wgjts",
    },
    {
      title: "操作",
      dataIndex: "active",
      render: (_, item: any) => {
        return (
          <Space>
            <Tag
              onClick={() => {
                showModal();
                setTitle("编辑");
                setObj(item);
              }}
            >
              编辑
            </Tag>
            <Tag
              onClick={() => {
                deldata(item.id).then((res) => {
                  get();
                });
              }}
            >
              删除
            </Tag>
          </Space>
        );
      },
    },
  ];
  const onFinish: FormProps<any>["onFinish"] = (values) => {
    searchdata(values).then((res) => {
      setData(res);
    });
  };

  const items: TabsProps["items"] = [
    {
      key: "1",
      label: "全部客户",
    },
    {
      key: "2",
      label: "我的客户",
    },
    {
      key: "3",
      label: "下属客户",
    },
    {
      key: "4",
      label: "重点客户",
    },
    {
      key: "5",
      label: "我协作的",
    },
    {
      key: "6",
      label: "下属协作的",
    },
  ];
  return (
    <div>
      <div
        style={{
          height: "40px",
          display: "flex",
          justifyContent: "space-between",
        }}
      >
        <div>
          <Button
            type="primary"
            onClick={() => {
              showModal();
              setTitle("添加");
              setObj({});
            }}
          >
            <PlusOutlined />
            添加
          </Button>
          {list.map((item: any) => {
            return (
              <Button key={item.id} icon={item.icon}>
                {item.name}
              </Button>
            );
          })}
        </div>
        <div
          style={{ display: "flex", lineHeight: "40px", marginRight: "10px" }}
        >
          <Space>
            <div>
              <Checkbox></Checkbox>
              <span>跟进模式</span>
              <QuestionCircleOutlined />
            </div>
            <Button>
              <ColumnHeightOutlined />
              <span>排序</span>
            </Button>
            <Button>
              <InsertRowAboveOutlined />
              <span>列表</span>
            </Button>
          </Space>
        </div>
      </div>
      <Table<DataType>
        columns={columns}
        dataSource={data}
        rowKey={"id"}
        pagination={{
          position: ["bottomRight"],
          defaultCurrent: 1,
          showSizeChanger: true,
          pageSizeOptions: ["5", "10", "20"],
        }}
      />
    </div>
  );
}
